<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
import { getRadarScore } from "../api/api";
require("echarts/theme/macarons"); // echarts theme

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
  },
  data() {
    return {
      chart: null,
      parentMsg: "", // 名字
      scoreData: [], // 成绩
      info: [],
    };
  },
  mounted() {},
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    getMsg(info) {
      this.info = info;
      this.parentMsg = info.stuName;
      this.scoreData = info.scoreData;
      // this.scoreData.value[4] = info.skilledScore;
      // this.scoreData.value[5] = info.originalScore;
      // this.scoreData.value[6] = info.reportScore;
      // this.scoreData.value[7] = info.mentScore;

      // 等上面执行完再执行下面的参数
      this.initChart();
    },
    initChart() {
      let stuName = this.parentMsg;
      this.chart = echarts.init(this.$el, "macarons");
      getRadarScore(stuName)
        .then((res) => {
          if (res.data.flag) {
            this.chart.setOption({
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: "#ff5151", // 数据线的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              // backgroundColor: "#000", // 背景颜色
              grid: {
                left: "10%",
                top: "10%",
                right: "10%",
                bottom: 0,
              },
              title: {
                text: "学生成绩分析",
                textStyle: {
                  padding: "50px",
                  color: "#fff",
                },
              },
              legend: {
                data: ["成绩"],
                textStyle: {
                  // 图例标题的样式
                  color: "#fff",
                  fontSize: 16,
                },
              },
              radar: {
                indicator: [
                  // 数据
                  {
                    name:
                      "检定环境搭建 " +
                      this.scoreData.value[0] +
                      "分（满分5分）",
                    max: 5,
                  },
                  {
                    name:
                      "检定前准备工作 " +
                      this.scoreData.value[1] +
                      "分（满分2分）",
                    max: 2,
                  },
                  {
                    name:
                      "检定项目选择 " +
                      this.scoreData.value[2] +
                      "分（满分1分）",
                    max: 1,
                  },
                  {
                    name:
                      "检定过程 " + this.scoreData.value[3] + "分（满分40分）",
                    max: 40,
                  },
                  {
                    name:
                      "熟练程度 " + this.scoreData.value[4] + "分（满分10分）",
                    max: 10,
                  },
                  {
                    name:
                      "原始记录 " + this.scoreData.value[5] + "分（满分20分）",
                    max: 20,
                  },
                  {
                    name:
                      "报告正确性 " +
                      this.scoreData.value[6] +
                      "分（满分20分）",
                    max: 20,
                  },
                  {
                    name:
                      "实验后仪器整理 " +
                      this.scoreData.value[7] +
                      "分（满分2分）",
                    max: 2,
                  },
                ],
                name: {
                  textStyle: {
                    color: "#fff", // 图里面的文字样式
                    fontSize: 15,
                  },
                },
                splitArea: {
                  show: true,
                  areaStyle: {
                    color: ["#e7e4e4", "#cccccc"],
                    // 图表背景网格的颜色
                  },
                },
              },
              series: [
                {
                  name: "成绩",
                  type: "radar",
                  data: [
                    {
                      name: this.scoreData.name,
                      value: this.scoreData.value,
                    },
                  ],
                },
              ],
            });
            return stuName;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
